<template>
    <div class="mine-my-team-wrap">
        <van-nav-bar title="站长管理" left-arrow fixed @click-left="onClickLeft" />
        <div class="tips">
            添加站长，可以在该页面授权站长账户的查看相关的数据，以及分配水机库存！
        </div>
        <div class="profit_core_title">
            本账号已授权账户:
            <!--   -->
            <div class="profit_btn" @click="showSetp"><van-icon name="plus" />新增</div>
        </div>
        <div>
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <div class="team_list">
                    <div class="team_list_item">
                        <img v-if="owner.avatar_url" :src="owner.avatar_url" alt="" />
                        <img v-else src="../../images/mine/head.png" alt="" />
                        <div class="team_list_item_info">
                            <div>
                                {{ owner.nickname }}
                            </div>
                            <div>
                                {{ owner.account }}
                            </div>
                        </div>
                        <div class="team_list_item_level" style="opacity: 0;">
                            解除授权
                        </div>
                        <div class="team_list_item_level level1" @click="allocationInfo(owner)" :style="level!=100?'opacity: 1;':'opacity: 0;'">
                            分配水机
                        </div>
                    </div>
                </div>
                <div class="team_list" v-for="(item, index) in fansList" :key="index">
                    <div class="team_list_item">
                        <img v-if="item.avatar_url" :src="item.avatar_url" alt="" />
                        <img v-else src="../../images/mine/head.png" alt="" />
                        <div class="team_list_item_info">
                            <div>
                                {{ item.nickname }}
                            </div>
                            <div>
                                {{ item.account }}
                            </div>
                            <!-- <div>
								消费金额：{{ item.consume_total }}&nbsp;&nbsp;团队人数：{{
									item.team_count
								}}
							</div> -->
                        </div>
                        <!-- <div class="team_list_item_level">经理</div> -->
                        <div class="info_level">
                            <div class="team_list_item_level" @click="getAuth(item)">
                                解除站长
                            </div>
                            <div class="team_list_item_level level1" @click="allocationInfo(item)" v-if="level!=100">
                                分配水机
                            </div>
                        </div>

                    </div>
                </div>
            </van-list>
        </div>
        <van-popup v-model="show" position="center" :style="{ height: '6.88rem', width: '80%' }" round>
            <div class="setp">
                <div class="setp_title">新增站长</div>
                <div class="setp_input">
                    <input type="text" @keyup.enter="onSearch" @blur="onSearch" v-model="keyword"
                        placeholder="请输入用户名/ID进行搜索" />
                    <img src="../../images/icon_search.png" alt="">
                </div>
                <div class="setp_list" v-if="teamsList.length > 0">
                    <div v-for="item, index in teamsList" :key="index" class="setp_item">
                        <div class="setp_item_left" v-if="item.avatar_url">
                            <img :src="item.avatar_url" alt="">{{ item.name }}({{ item.account }})
                        </div>
                        <div class="setp_item_left" v-else>
                            <img src="../../images/mine/head.png" alt="">{{ item.name }}({{ item.account }})
                        </div>
                        <!-- <div class="setp_item_right" @click="selectOption(item.uid)">
                            <img v-if="selectedItems.includes(item.uid)" src="../../../images/default-tag-icon.png"
                                alt="">
                            <img v-else src="../../../images/default-circle.png" alt="">
                        </div> -->
                        <div class="setp_item_right" @click="selectOption(item.uid)">
                            <img v-if="selectedItems.includes(item.uid)" src="../../images/default-tag-icon.png"
                                alt="">
                            <img v-else src="../../images/default-circle.png" alt="">
                        </div>
                    </div>
                </div>
                <div style="color: #666;text-align: center;font-size: .24rem;margin-top: 1rem;" v-else>
                    没有更多了
                </div>
                <div class="setp_btn">
                    <div class="setp_qx" @click="showClone">取消</div>
                    <div class="setp_qd" @click="submit">确定</div>
                </div>
            </div>

        </van-popup>
        <van-popup v-model="authShow" position="center" :style="{ height: '4.3rem', width: '80%' }" round>
            <div class="setp">
                <div class="setp_title">温馨提示</div>
                <div class="auth_tips">
                    解除站长身份后，该股东账号不可再查看本账号的相关数据；之前分配的水机产生的相关收益，均会被取消，是否确认解除其股东身份？
                </div>
                <div class="setp_btn">
                    <div class="setp_qx" @click="authShow = false">取消</div>
                    <div class="setp_qd" @click="submitAuth">确定</div>
                </div>
            </div>

        </van-popup>
        <!--  -->
        <van-popup v-model="allocationShow" position="center" :style="{ height: '6rem', width: '80%' }" round>
            <div class="setp">
                <div class="setp_title">分配水机</div>
                <div class="auth_tips">
                    <div class="auth_tips_item">
                        <div>站长昵称:</div> <span>{{ info.nickname }}</span>
                    </div>
                    <div class="auth_tips_item">
                        <div>站长电话: </div><span>{{ info.account }}</span>
                    </div>
                    <div class="auth_tips_item">
                        <div>已分配水机:</div> <span>{{ info.quantity }}</span>
                    </div>
                    <div class="auth_tips_item">
                        <div>本次分配水机: </div><input type="text" v-model="quantity_num" placeholder="请输入分配数量(台)">
                    </div>
                    <div class="quantity_tip">当前水机库存剩余数量为:{{ quantity_surplus || 0 }}台 </div>
                </div>
                <div class="setp_btn">
                    <div class="setp_qx" @click="allocationShow = false">取消</div>
                    <div class="setp_qd" @click="handleAllocation">确定</div>
                </div>
            </div>

        </van-popup>
    </div>
    <!-- </div> -->
</template>
<script>
import {
    USER_SEARCH,
    DATA_AUTH,
    DATA_AUTH_ADD,
    DATA_AUTH_REMOVE,
    ALLOCATION_MACHINE
} from "@/api/mine";
export default {
    data() {
        return {
            allocationShow: false,
            finished: false,
            loading: false,
            inviter_info: {},
            page: 1,
            pageSize: 50,
            fansList: [],
            total_count: 0,
            currentValidUsers: 2.2, // 当前有效用户数量（单位：万）
            totalValidUsers: 5, // 总有效用户数量（单位：万）
            currentValidTeam: 2.3,
            totalValidTeam: 6,
            inviter: {},
            show: false,
            selectedItems: [],
            keyword: '',
            teamsList: [],
            level: '',
            authShow: false,
            uid: '',
            owner: {},
            info: {},
            quantity_surplus: '',
            quantity_num: ''
        };
    },
    mounted() {
        window.scrollTo(0, 0);
        this.level = this.$route.query.level == 0 ? 100 : this.$route.query.level == 1 ? 101 : this.$route.query.level == 2 ? 102 : 103
        // this.$http(TEAM_INFO).then((res) => {
        //     // this.inviter = res.data;
        //     this.inviter_info = res.data.level_info;
        // });
    },
    methods: {
        onClickLeft() {
            this.$router.back();
        },
        showSetp() {
            this.show = true
            // this.handleFens()
        },
        selectOption(index) {
            this.selectedItems = [index];
            // const idx = this.selectedItems.indexOf(index);
            // if (idx === -1) {
            //     // 如果当前选项未被选中，则添加到数组
            //     this.selectedItems.push(index);
            // } else {
            //     // 如果当前选项已被选中，则移除
            //     this.selectedItems.splice(idx, 1);
            // }
            console.log(this.selectedItems);

        },
        onSearch() {
            this.selectedItems = []
            this.handleFens()
        },
        showClone() {
            this.show = false;
            this.keyword = ''
            this.selectedItems = []
            this.teamsList = []
        },
        getAuth(item) {
            this.authShow = true
            this.uid = item.uid
        },
        allocationInfo(item) {
            this.info = item
            console.log(this.info);

            this.allocationShow = true
        },
        handleAllocation() {
            if (!this.quantity_num) {
                return this.$toast('请输入分配数量')
            }
            this.$http.post(ALLOCATION_MACHINE, {
                level: this.level,
                uid: this.info.uid,
                quantity: this.quantity_num

            }).then(res => {
                this.$toast.success(res.message)
                this.allocationShow = false;
                this.quantity_num = ''
                this.ajaxGoodList()
            })
        },
        onLoad() {
            let params = {
                page_num: this.page,
                page_size: this.pageSize,
                key: this.keyword,
                level: this.level
            }
        },
        submitAuth() {
            this.$http.post(DATA_AUTH_REMOVE, {
                uid: this.uid,
                level: this.level

            }).then(res => {
                this.$toast.success(res.message)
                this.authShow = false;
                this.uid = ''
                this.ajaxGoodList()
            })
        },
        ajaxGoodList() {
            this.page = 1
            this.fansList = []
            this.onLoad()
            // this.handleFens()
        },
        submit() {
            // console.log(this.selectedItems);
            if (this.selectedItems.length == 0) {
                return this.$toast('请选择')
            }
            this.$http.post(DATA_AUTH_ADD, {
                uid: this.selectedItems[0],
                level: this.level

            }).then(res => {
                this.$toast.success(res.message)
                this.show = false;
                this.keyword = ''
                this.selectedItems = []
                this.teamsList = []
                this.ajaxGoodList()
            })
        },
        // isSelected(item) {
        // 	return this.selectedItems.includes(item);
        // },
        calculatePercentage(reqVal, nowVal) {
            if (nowVal >= reqVal) {
                return 100; // 如果当前值大于或等于最高值，返回 100%
            }
            // 计算进度百分比
            const progress = (nowVal / reqVal) * 100; // 这里 nowVal 是当前值，reqVal 是最高值
            // 确保进度在 0 到 100 之间
            return Math.max(0, Math.min(100, progress));
        },
        // 列表
        handleToTeam(name) {
            this.$router.push({
                name: 'teamList',
                query: {
                    name: name || ''
                }
            })
        },
        handleFens() {
            let params = {
                page_num: 1,
                page_size: 10,
                key: this.keyword,
            }
            this.$http.get(USER_SEARCH, {
                params: params
            }).then((res) => {
                this.teamsList = res.data
            })
        },

        onLoad() {
            let params = {};
            params["page_num"] = this.page;
            params["page_size"] = this.pageSize;
            params['level'] = this.level;
            // params['status'] = this.active;
            this.$http.get(DATA_AUTH, {
                params: params
            }).then((res) => {
                const {
                    list
                } = res.data;
                this.total_count = res.data.pages.total_count;
                this.owner = res.data.owner
                this.quantity_surplus = res.data.quantity_surplus
                if (list && list.length) {
                    this.page++;

                    this.fansList = this.fansList.concat(list);
                    // 加载状态结束
                    this.loading = false;
                    if (list.length < this.pageSize) {
                        this.finished = true;
                    }
                } else {
                    this.finished = true;
                }
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.mine-my-team-wrap {
    min-height: 100vh;
    padding-top: 58px;
    padding-bottom: 1rem;
    background-color: #fff;
    box-sizing: border-box;

   ::v-deep .van-nav-bar .van-icon {
        color: #333333;
    }

    ::v-deep .van-nav-bar__arrow {
        font-size: 20px;
    }

    ::v-deep .van-hairline--bottom::after {
        display: none;
    }

    .setp {
        width: 95%;
        margin: 0 auto;

        .setp_title {
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: .32rem;
            color: #333333;
            // line-height: 22px;
            text-align: center;
            font-style: normal;
            padding-top: .32rem;
        }

        .auth_tips {
            padding: .28rem .2rem;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: .28rem;
            color: #333333;

            .auth_tips_item {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: .28rem;
                color: #666666;
                display: flex;
                margin-bottom: .24rem;

                div {
                    width: 2rem;
                }

                span {
                    color: #333333;
                }

                input {
                    border: none;
                    border-bottom: 1px solid #F2F4F5;
                    padding-bottom: 10px;
                    font-size: .28rem;
                }
            }

            .quantity_tip {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: .24rem;
                margin-top: .26rem;
                color: #F9301B;
            }
        }

        .setp_input {
            width: 100%;
            height: .64rem;
            display: flex;
            align-items: center;
            position: relative;
            background: #F2F4F5;
            border-radius: .42rem;
            margin-top: .34rem;
            box-sizing: border-box;

            input {
                width: 100%;
                height: 100%;
                background-color: #F2F4F5;
                border: none;
                border-radius: .42rem;
                font-size: .28rem;
                text-indent: .3rem;
            }

            img {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                right: 0.2rem;
                width: .32rem;
                height: .32rem;
            }
        }

        .setp_btn {
            width: 100%;
            height: 1rem;
            position: fixed;
            left: 0;
            bottom: 0.3rem;
            background: #fff;
            box-sizing: border-box;
            display: flex;
            justify-content: space-around;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            line-height: .8rem;
            text-align: center;
            font-style: normal;

            .setp_qx {
                width: 40%;
                height: .8rem;
                background: #FFFFFF;
                border-radius: .4rem;
                border: 1px solid #E3E3E3;
                font-size: .32rem;
                color: #333333;
            }

            .setp_qd {
                width: 40%;
                height: .8rem;
                background: linear-gradient(90deg, #4A89EC 0%, #1261E2 100%);
                border-radius: .4rem;
                // border: 1px solid #E3E3E3;
                font-size: .32rem;
                color: #FFFFFF;
            }
        }
    }

    .setp_list {
        height: 3.3rem;
        overflow: auto;
        margin-top: .4rem;

        .setp_item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: .24rem;

            .setp_item_left {
                display: flex;
                align-items: center;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: .24rem;
                color: #333333;
                // line-height: 17px;
                text-align: left;
                font-style: normal;

                img {
                    width: .56rem;
                    height: .56rem;
                    margin-right: .16rem;
                    // border-radius: .56rem;
                }
            }

            .setp_item_right {
                img {
                    width: .32rem;
                }
            }
        }
    }

    .tips {
        width: 95%;
        margin: 0 auto;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: .24rem;
        margin-top: .32rem;
        margin-bottom: .66rem;
        color: #333333;
    }

    .profit_core_title {
        width: 95%;
        margin: 0 auto;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: .28rem;
        color: #333333;
        // line-height: 18px;
        text-align: left;
        font-style: normal;
        padding-top: .32rem;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .profit_btn {
            // width: 94px;
            height: .6rem;
            background: #FFFFFF;
            border-radius: .1rem;
            border: 1px solid #1D69E4;
            line-height: .6rem;
            padding: 0 .22rem;
            font-size: .28rem;
            color: #1D69E4;
        }
    }

    .team-info {
        width: 95%;
        height: 2.8rem;
        margin: 0 auto;
        background: url('../../images/mine/level_bg.png') no-repeat center;
        background-size: cover;
        font-family: PingFangSC, PingFang SC;
        color: #FFFFFF;
        font-style: normal;
        padding: 0 .48rem;
        box-sizing: border-box;
        padding-top: .6rem;
        position: relative;

        .team-title {
            font-weight: 500;
            font-size: .36rem;
        }

        .team-desc {
            font-weight: 400;
            font-size: .24rem;
            padding-top: .8rem;
        }

        .team-level {
            position: absolute;
            right: 1.1rem;
            bottom: 0.32rem;
            font-weight: 500;
            font-size: .28rem;
        }
    }

    .team-invite {
        width: 7.02rem;
        height: 1.68rem;
        padding: 0.24rem 0.32rem;
        margin: auto;
        margin-bottom: 0.2rem;
        border-radius: 0.16rem;
        box-sizing: border-box;
        background-color: #FFFFFF;

        .team-invite-title {
            height: 0.4rem;
            margin-bottom: 0.1rem;
            line-height: 0.4rem;
            font-size: 0.28rem;
            font-weight: 500;
            color: #333333;
        }

        .team-invite-desc {
            display: flex;
            align-items: center;

            .team-invite-head {
                width: 0.72rem;
                height: 0.72rem;
                margin-left: 0.14rem;
                margin-right: 0.18rem;
            }

            .team-invite-name {
                font-size: 0.28rem;
                color: #333333;
            }
        }
    }

    .profit_core {
        width: 7.02rem;
        margin: auto;
        margin-bottom: 0.2rem;
        padding: 0.2rem 0.28rem 0.32rem 0.32rem;
        background: linear-gradient(117deg, #F62B23 0%, #F26554 100%);
        border-radius: 0.16rem;
        box-sizing: border-box;

        .profit_team {
            display: flex;
            justify-content: space-between;

            .profit_team_left {
                width: 3.82rem;
                margin-top: 0.24rem;
                font-size: 0.24rem;
                color: #FFFFFF;

                .profit_team_left_item {
                    margin-bottom: 0.24rem;
                }

                .profit_team_left_title {
                    height: 0.34rem;
                    font-weight: 400;
                    line-height: 0.34rem;
                    margin-bottom: 0.08rem;

                    &.right {
                        margin-top: 0.08rem;
                        text-align: right;
                    }
                }
            }

            .profit_team_right {
                img {
                    display: block;
                    height: 1.82rem;
                }

                div {
                    height: 0.4rem;
                    margin-top: 0.06rem;
                    line-height: 0.4rem;
                    font-weight: 500;
                    font-size: 0.28rem;
                    text-align: center;
                    color: #FFFFFF;
                }
            }
        }

        .profit_team_tip {
            line-height: 0.34rem;
            font-weight: 400;
            font-size: 0.24rem;
            margin-top: 0.24rem;
            color: #FFFFFF;
            opacity: 0.8;
            white-space: pre-wrap;
        }
    }

    .team_list {
        width: 95%;
        margin: 0 auto;

        .team_list_item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: .1rem 0;
            background-color: hsl(0, 0%, 100%);
            // border-radius: 8px;
            margin-top: .2rem;
            border-bottom: 1px solid #E3E3E3;
            padding-bottom: .2rem;
            .info_level{
                width: 42%;
                display: flex;
                justify-content: flex-end;
                div{
                    margin-right: .08rem;
                }
                div:last-child{
                    margin-right: 0;
                }
            }
            img {
                width: .76rem;
                height: .76rem;
                border-radius: .76rem;
                // margin-right: .4rem;
            }

            .team_list_item_info {
                width: 40%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: .28rem;
                color: #333333;
                line-height: .4rem;
                // text-align: left;
                font-style: normal;

                div:last-child {
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: .24rem;
                    color: #999999;
                    // line-height: 14px;
                    text-align: left;
                    font-style: normal;
                }
            }

            .team_list_item_level {
                background: #FFF2F2;
                border: 1px solid #FF9490;
                border-radius: .08rem;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: .24rem;
                padding: .1rem .2rem;
                color: #F32A23;
            }

            .level1 {
                background: #EDF4FF;
                // border-radius: 2px;
                border: 1px solid #1D69E4;
                color: #1D69E4;
            }
        }
    }

    .team-fensi {
        position: relative;
        width: 7.02rem;
        height: 2.84rem;
        padding: 0.3rem 0;
        margin: auto;
        margin-bottom: 0.2rem;
        color: #FFFFFF;
        background: url(../../images/mine/mine-team-bg.png) no-repeat center;
        background-size: cover !important;
        box-sizing: border-box;

        .today-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 0.52rem;
            right: 0.4rem;
            height: 0.6rem;
            padding: 0 0.24rem;
            font-size: 0.28rem;
            color: #333333;
            border-radius: 0.3rem;
            background-color: #FFFFFF;
        }

        .team-fensi-tltle {
            height: 0.4rem;
            margin-left: 0.48rem;
            margin-bottom: 0.08rem;
            line-height: 0.4rem;
            font-size: 0.28rem;
            font-weight: 400;
            color: #FFFFFF;
        }

        .team-fensi-count {
            height: 0.74rem;
            margin-left: 0.48rem;
            margin-bottom: 0.14rem;
            line-height: 0.74rem;
            font-weight: 500;
            font-size: 0.52rem;
            color: #FFFFFF;
        }

        .team-fensi-ul {
            display: flex;
            justify-content: space-between;

            .team-fensi-li {
                flex: 1;
                text-align: center;

                &.li-center {
                    position: relative;

                    &::before {
                        position: absolute;
                        left: 0;
                        top: 0;
                        bottom: 0;
                        margin: auto;
                        content: '';
                        width: 0.02rem;
                        height: 0.5rem;
                        background: rgba(255, 255, 255, 0.2);
                    }

                    &::after {
                        position: absolute;
                        right: 0;
                        top: 0;
                        bottom: 0;
                        margin: auto;
                        content: '';
                        width: 0.02rem;
                        height: 0.5rem;
                        background: rgba(255, 255, 255, 0.2);
                    }
                }

                .team-fensi-val {
                    height: 0.44rem;
                    margin-bottom: 0.08rem;
                    line-height: 0.44rem;
                    font-weight: 500;
                    font-size: 0.32rem;
                }

                .team-fensi-label {
                    font-weight: 400;
                    font-size: 0.24rem;
                    opacity: 0.8;
                }
            }
        }
    }

    .team-static {
        width: 7.02rem;
        height: 2.52rem;
        margin: auto;
        border-radius: 0.16rem;
        background-color: #FFFFFF;
        overflow: hidden;

        .team-static-title {
            display: flex;
            align-items: center;
            height: 0.72rem;
            padding: 0 0.24rem;
            box-sizing: border-box;
            background-color: #f4f7fd;

            .team-static-title-icon {
                width: 0.32rem;
                height: 0.32rem;
                margin-right: 0.16rem;
            }

            .team-static-title-text {
                font-size: 0.28rem;
                font-weight: 500;
                color: #333333;
            }
        }

        .team-static-ul {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .team-static-li {
                flex: 1;
                margin-top: 0.4rem;
                text-align: center;

                .team-static-li-val {
                    height: 0.44rem;
                    margin-bottom: 0.16rem;
                    line-height: 0.44rem;
                    font-size: 0.32rem;
                    font-weight: 500;
                    color: #333333;
                }

                .team-static-li-label {
                    height: 0.4rem;
                    line-height: 0.4rem;
                    font-size: 0.28rem;
                    color: #666666;
                }
            }
        }
    }


}
</style>
